<template>
  <div class="dingdan">
    <h2>确认订单</h2>
  </div>

  <div class="bg" style="width: 100%;height:180px; background: #BA6608; ">
    <van-image class="pic" round width="60px" height="60px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    <h1 class="tit">张三 手机号:132****5532</h1>
    <p class="num">北京市昌平区东小口镇XXXXXXX</p>
  </div>
  <van-card class="card" tag="热门" price="200.00" desc="描述信息" title="商品标题"
    thumb="https://img0.baidu.com/it/u=680130849,2868739234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
    origin-price="99999" />

  <div class="count">
    <span>购买数量</span>
    <van-stepper class="btn" />
  </div>

  <div class="tijiao">
    <span>共1件</span>
    <h4>合计:<span style="color: red;">￥200</span></h4>
    <button @click="$router.push('/home/conorder')">提交订单</button>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.card {
  margin-top: 20px;
}

.tijiao {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
  margin-left: 100px;
}

.tijiao>button {
  width: 100px;
  height: 40px;
  border: none;
  background-color: #f68607;
  border-radius: 5px;
}

.dingdan {
  line-height: 50px;
  text-align: center;
  box-shadow: 0 0 1px 1px gray;
}

.bg {
  overflow: hidden;
  position: relative;
}

.pic {
  position: absolute;
  top: 20%;
  left: 40%;
}

.tit {
  position: absolute;
  top: 50%;
  left: 29%;
  font-size: 18px;
  color: #fff;
  margin-top: 5px;
}

.num {
  position: absolute;
  top: 65%;
  left: 30%;
  font-size: 15px;
  color: #fff;
}

.set {
  position: absolute;
  right: 5%;
  top: 15%;
}

.count {
  display: flex;
  justify-content: space-between;
}

.count>span {
  margin-left: 15px;
}

.count>.btn {
  margin-right: 15px;
}</style>